<template>
  <div>
    <head-nav :cname="titleName"></head-nav>
    <data-list>
      <template>
        <span class="add" onselectstart="return false" @click="addTj"
          >添加</span
        >
      </template>
    </data-list>
    <el-table :data="goodData" border>
      <el-table-column prop="id" label="编号" width="100"> </el-table-column>
      <el-table-column prop="categoryName" label="分类名称" width="120">
      </el-table-column>
      <el-table-column prop="sqe" label="级别" width="50"> </el-table-column>
      <el-table-column prop="commodityNum" label="商品数量" width="80">
      </el-table-column>
      <el-table-column prop="endTime" label="数量单位" width="80">
        <template>
          <span>件</span>
        </template>
      </el-table-column>
      <el-table-column label="导航栏" width="100">
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->
          <el-switch
            v-model="scope.row.navigationBar"
            @change="changtTab(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否显示" width="100">
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->
          <el-switch v-model="scope.row.is_show" @change="changtTab(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="sqe" width="50" label="排序"> </el-table-column>
      <el-table-column label="设置">
        <template slot-scope="scope">
          <a href="javascript:;" @click="settings(scope.row)">新增下级</a>
          <a href="javascript:;" class="edit-content" @click="edit(scope.row)"
            >查看下级</a
          >
          <a href="javascript:;">转移商品</a>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a href="javascript:;">编辑</a>
          <a href="javascript:;" class="del-l" @click="del(scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="[2, 4, 8, 16]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleName: this.$route.query.name,
      goodData: [],
      pageNumber: 1,
      total: 100
    }
  },
  methods: {
    // 删除
    del(scp) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.$http.get(
            '/commodity/deleteCommodity',
            {
              params: {
                id: scp.id
              }
            }
          )
          if (res.Flag !== true) {
            return this.$Toast('删除失败', 'error')
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    // 查看下级
    edit(scp) {
      console.log(scp, 'dasdasda')
    },
    // 新增下机
    settings() {
      // console.log(1)
      this.$router.history.push('/addCate?name=新增分类')
    },
    addTj() {
      console.log(1111)
    },
    handleSizeChange(val) {
      console.log(val, 'abc')
    },
    handleCurrentChange(val) {
      console.log(val, 'def')
      this.pageNumber = val
      this.getgoodsData()
    },
    async getgoodsData() {
      const { data: res } = await this.$http.post('/commodity/findPage', {
        pagination: {
          currentPage: this.pageNumber
        }
      })
      console.log(res, '商品配置')
      if (res.Flag !== true) {
        this.$Toast('获取商品分类失败', 'error')
      }
      this.$Toast('获取商品分类成功', 'success')
      res.data.forEach(item => {
        console.log(item, 'item')
        console.log(item.navigationBar)
        console.log(item.is_show)
        item.navigationBar = Boolean(item.navigationBar)
        item.is_show = Boolean(item.is_show)
      })
      this.goodData = res.data
      console.log(this.goodData, 'GOOD')
    }
  },
  created() {
    this.getgoodsData()
  }
}
</script>

<style lang="less" scope>
.del-l {
  margin-left: 10px;
}
</style>
